<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Monaco</title>

	<style type="text/css">
		html, body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
	</style>
</head>
<body>

	<div id="container" style="width: 100%; height: 100%"></div>

	<script src="resource://zotero/vs/loader.js"></script>
	<script>
		/**
		 * @param {Object} [params = {}]
		 * @return {Promise<void>}
		 */
		function loadMonaco(params = {}) {
			let container = document.getElementById('container');

			require.config({ paths: { vs: 'resource://zotero/vs' } });

			let proxy = URL.createObjectURL(
				new Blob(
					[`
						self.MonacoEnvironment = {
							baseUrl: 'resource://zotero/'
						};
						importScripts('resource://zotero/vs/base/worker/workerMain.js');
					`],
					{ type: "text/javascript" }
				)
			);
			window.MonacoEnvironment = { getWorkerUrl: () => proxy };

			return new Promise(resolve => require(['vs/editor/editor.main'], function () {
				globalEditor = monaco;

				monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
					target: monaco.languages.typescript.ScriptTarget.ES6,
					allowNonTsExtensions: true // needed for peeking definitions from in-memory models to work
				});

				editor = monaco.editor.create(container, {
					theme: 'vs-dark',
					language: 'javascript',
					scrollBeyondLastLine: false,
					minimap: { enabled: false },
					// Clicking links doesn't actually work, so disable them (for now)
					links: false,
					insertSpaces: false,
					detectIndentation: false,
					...params
				});
				
				editor.getModel().setEOL(monaco.editor.EndOfLineSequence.LF);

				window.onresize = function () {
					editor.layout();
				};

				resolve({ monaco, editor });
			}));
		}
	</script>
	
</body>
</html>